<link rel="stylesheet" type="text/css" href="<?= base_url() ?>file/js/easyui/themes/gray/easyui.css">
<link rel="stylesheet" type="text/css" href="<?= base_url() ?>file/js/easyui/themes/icon.css">

<?php
    #### tampilkan alert jika terdapat kesalahan dalam memasukkan data
	$msg = $this->session->flashdata('message');
	$salah = validation_errors();
	if($salah <> ""){
			echo'<div id="box-messages">
					<div class="messages">
							<div id="message-error" class="message message-error">
									<div class="image">
											<img src="'. base_url() .'file/shell/smooth/resources/images/icons/error.png" alt="Error" height="32" />
									</div>
									<div class="text">
											<h6>Terdapat kesalahan dalam memasukkan data:</h6>
											<br />
											<span>'. validation_errors() .'</span>
									</div>
									<div class="dismiss">
											<a href="#message-error"></a>
									</div>
							</div>
					</div>
			</div>';
	}		
	else if($msg <> ""){
		echo'<div id="box-messages">
					<div class="messages">
							 <div id="message-error" class="message message-error">
									 <div class="image">
											<img src="'. base_url() .'file/shell/smooth/resources/images/icons/error.png" alt="Error" height="32" />
									</div>
									<div class="text">
											<h6>'. $msg .'</h6>
									</div>
									<div class="dismiss">
											<a href="#message-error"></a>
									</div>
							</div>
					</div>
			</div>';
	}
?>

<form id="form_simpan" action="<?php $_SERVER['PHP_SELF']; ?>" method="post">		
<div class="panel-wrap" style="height: auto">
	
	<div class="panel-header-div">Informasi Teritori</div>
	
    <div class="panel-body-div">
        <div class="left-panel-body">
            <h2><?php echo $region." ".$cluster; ?></h2>
        </div>
        <div class="right-panel-body">
            <table class="table-right-panel" width="100%" border="solid black 1px">
                <tr align="center" class="tr-colour">
                    <th width="50%" align="center">Tanggal</th>
                    <th align="center">Nota Pengambilan Baru</th>
                </tr>
                
                <tr align="center" class="gray">
                    <td width="50%" align="center">
						<input size="15%"  type="text" id="date" name="scan_date"  
							value="<?php 
								date_default_timezone_set("Asia/Jakarta");
								echo date("Y-m-d");
							?>" readonly="readonly" />
					</td>                    
					<td class="readonly" align="center" >
						<span style="font-size: 16pt"><b>Penomoran Otomatis</b></span>
					</td> 
                </tr>
            </table>
        </div>
    </div>
</div>

<div class="panel-wrap" style="height: auto">
	<div class="panel-header-div">Informasi Pengambilan Barang</div>
    <div class="panel-body-div">

    	<table class="item-list">
    		<thead>
    			<tr>
    				<th>Pilih Sales</th>
    				<th>Jumlah Item</th>
    			</tr>
    		</thead>
    		<tbody>
    			<tr>
    				<td>
			    	<select name="sales_id" id="sales_id">
			    		<option value=""></option>
			    		<?php foreach ($sales_id as $key): ?>
			    			<option value="<?php echo $key->user_id; ?>"><?php echo $key->user_id.' | '.$key->user_group_caption.' | '.$key->user_name; ?></option>
			    		<?php endforeach ?>
			    	</select>    					
    				</td>
    				<td>
    					<input type="type" id="jumlah_item" name="jumlah_item" onkeydown="generate_row()" size="8" >
							<img src="<?= base_url() ?>file/js/easyui/themes/icons/apply.png" /> Tekan tombol "Enter"
    				</td>
    			</tr>
    		</tbody>
    	</table>

    	<div style="padding:10px">
			<table id="" class="item-list" style="width:100%; margin: 0px">
				<thead>
					<tr align="center" class="tr-colour3">
						<th style="width: 20px">#</th>
						<th width='310px'>ICCID</th>
						<th width='200'>MDN</th>
						<th>Nama Item</th>
						<th>Group Item</th>
						<th style="width:100px">Harga</th>
					</tr>
				</thead>

				<tbody id="listICCID">
					<!-- Di sini muncul list item -->
				</tbody>

				<tfoot>
					<tr>
						<td class='jumlah_item'></td>
						<td colspan="4" style="text-align: right">Sub Total</td>
						<td>
							<input type="text" class="subtotal" id="textSubtotal" name="subtotal" disabled="disabled" value="0" size="10" style="text-align:right" />
						</td>
					</tr>
				</tfoot>
			</table>
			</div>

			<div>					
				<input type="hidden" id="vLimit">
				<input type="hidden" id="cLimit">
			</div>
        
			<div style="margin-bottom: 10px; text-align: center">
				<input type="submit" value="Simpan" id="simpan_btn"/>
				<input type="reset" value="Reset" />
			</div>
		
    </div>
</div>
</form>


<script type="text/javascript">
	var iterasi = 1;
	var _ss = 0;

	$(document).ready(function() {
    // $('#simpan_btn').click(function(){
    //   $(form).submit();
    //   $('#simpan_btn').attr('disabled', 'disabled');
    // });

    $("form").submit(function () { $('#simpan_btn').attr('disabled', 'disabled'); });

		$('#sales_id').change(function(){
			$('tbody#listICCID').empty();
			if($(this).val())
			$.post(
				"<?php echo base_url(); ?>index.php/scan/getLimitMinMax/"+$(this).val(),
				function(data) {
					var datax = data.split(':');
					$('#cLimit').val( parseFloat( datax[1] ) );
					$('#vLimit').val( parseFloat( datax[0] ) );
				}
			)
		});

    $("#jumlah_item").keydown(function(event) {
      if ( event.which == 13 || event.which == 9 ) {
        event.preventDefault();
        for (var i = 0; i < $(this).val(); i++) {
          var newRow = "<tr class='item_rows' id='item_"+iterasi+"'>"+
            "<td id='action_"+iterasi+"'>"+
              "<img src='<?php echo base_url(); ?>file/images/cross-script.png' title='Remove' onclick='remove_row("+iterasi+")' />"+
            "</td>"+
            "<td id='iccid_"+iterasi+"'>"+
              "<input type='text' name='iccid[]' id='item_iccid_"+iterasi+"' size='45' onkeypress='validate_iccid("+iterasi+")' >"+
            "</td>"+
            "<td id='mdn_"+iterasi+"'></td>"+
            "<td id='item_name_"+iterasi+"'></td>"+
            "<td id='item_group_"+iterasi+"'></td>"+
            "<td class='sub_price' id='price_"+iterasi+"' style='text-align:right'></td>"+
            "</tr>";
            $('tbody#listICCID').append(newRow);
            iterasi++;
        };
        jumlah_item();
      }
    });



  }); // end of document ready

  function generate_row() {
    var sales_id = $('#sales_id').val();
		if(!sales_id) {
			alert('Pilih sales terlebih dulu');
			$('#jumlah_item').val('');
		}
	} // end of function generate_row

	function remove_row(row_id) {
		$('tbody#listICCID > tr#item_'+row_id).remove();
		jumlah_item();
		recount();
	}

	function jumlah_item() {
		var jumlah_row = $('tbody#listICCID > tr').length;
		$('.jumlah_item').html(jumlah_row);
	}

	function validate_iccid(row_id) {
    $('#item_iccid_'+row_id).keypress(function(event) {
      
      if (event.keyCode == 13) {
        event.preventDefault();
        if($('#item_iccid_'+row_id).val() == '' || $('#item_iccid_'+row_id).val() == null) {
          alert('ICCID tidak boleh kosong'); 
          return false;
          event.preventDefault();
        }
        else {
          $.post(
          	"<?php echo base_url();?>index.php/scan/ajaxValidate",
          	{sales_id:$('#sales_id').val() , iccid: $('#item_iccid_'+row_id).val() },
          	function(data) {
          		var datax = jQuery.parseJSON(data);
          		if(datax.messege == 'Valid')
          		{ 
                var t = 0;
                $('#messege_'+row_id).remove();
                $('#mdn_'+row_id).remove();
                $('#item_name_'+row_id).remove();
                $('#item_group_'+row_id).remove();
                $('#price_'+row_id).remove();

                var detail = "<td id='mdn_"+row_id+"'>"+datax.item_detail.mdn+"</td>" +
                             "<td id='item_name_"+row_id+"'>"+datax.item_detail.item_name+"</td>" +
                             "<td id='item_group_"+row_id+"'>"+datax.item_detail.item_group_name+"</td>" +
                             "<td class='sub_price' id='price_"+row_id+"' style='text-align:right' >"+datax.item_detail.price+"</td>" ;

                $('#iccid_'+row_id).after(detail);

  			        recount();
          		}
          		else {
          			// alert(datax.messege);
                // $('#mdn_'+row_id).html(datax.messege);
                $('#messege_'+row_id).remove();
                $('#mdn_'+row_id).remove();
                $('#item_name_'+row_id).remove();
                $('#item_group_'+row_id).remove();
                $('#price_'+row_id).html('0');
                $('#iccid_'+row_id).after('<td colspan="3" id="messege_'+row_id+'" style="font-size: 13px; font-weight: bold; color: red;">'+datax.messege+'</td>');
          		}
              $(this).focusout();
          	}
          );
        }
      }
    });
	}

	function recount() {
		var cLimit = $('#cLimit').val();  //limit maksimal yang diperbolehkan
		var vLimit = $('#vLimit').val();
		sum = 0;
		$('.sub_price').each(function() {
			sum = Number(sum) + Number($(this).html());
		});

		$('#textSubtotal').val(sum);

		Limit = Number(vLimit) + Number(sum);
		// $('#vLimit').val(vLimit);
		// alert(cLimit+" "+Limit);
		if(Limit > cLimit) 
		{	
			alert('Jumlah item melebihi kredit limit'); 
			$('#simpan_btn').attr('disabled', 'disabled');
		}
		else
			{ $('#simpan_btn').removeAttr('disabled'); }
	}

</script>